<template>
  <el-dialog v-model="dialogVisible" :title="title" :width="width" :draggable="true" :close-on-click-modal="false" :show-close="false"
    :close-on-press-escape="false">
    <!-- 插槽 -->
    <slot></slot>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="cancle">取消</el-button>
        <el-button @click="submit" type="primary" >
          {{ confirmText }}
        </el-button>
      </span>
    </template>

  </el-dialog>
</template>

<script setup>
import { ref } from 'vue'

const dialogVisible = ref(false)
const showDialog = () => {
  dialogVisible.value = true
}
const closeDialog = () => {
  dialogVisible.value = false
}
//向父组件暴露方法
defineExpose({
  showDialog,
  closeDialog
})
//对外暴露属性
const props = defineProps({
  title: String,
  width: {
    type: String,
    default: '40%'
  },
  destoryOnClose: {
    type: Boolean,
    default: true
  },
  confirmText: {
    type: String,
    default: '确定'
  }
})
// 对外暴露一个 submit 方法
const emit  = defineEmits(['submit', 'cancle'])
const submit = () => emit('submit')
const cancle = () => {
  emit('cancle')
  dialogVisible.value = false
}
</script>

<style scoped></style>